<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>GET/POST 请求测试</title>
    <style>
        .test-btn {
            width: 80%;
            max-width: 600px;
            height: 80px;
            font-size: 1.2rem;
            margin: 10px 0;
            cursor: pointer;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 8px;
            transition: background-color 0.3s;
        }
        .test-btn:hover {
            background-color: #1976D2;
        }
        .test-btn.post-btn {
            background-color: #4CAF50;
        }
        .test-btn.post-btn:hover {
            background-color: #388E3C;
        }
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 10px;
            background-color: #f5f5f5;
            margin: 0;
            font-family: sans-serif;
            min-height: 100vh;
            box-sizing: border-box;
        }
        h1 {
            color: #333;
            font-size: 1.8rem;
            margin: 0 0 20px 0;
            text-align: center;
        }
        /* 初始按钮容器 */
        #initialContainer {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            flex: 1;
            justify-content: center;
        }
        /* 结果显示容器（正常显示，非隐藏） */
        #resultContainer {
            width: 95%;
            height: 60vh;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            background-color: white;
            display: none; /* 初始隐藏 */
            overflow: auto;
        }
        /* 隐藏的iframe：仅用于接收POST表单提交，不显示 */
        #hiddenPostIframe {
            display: none; /* 关键：隐藏iframe，避免影响界面 */
            width: 0;
            height: 0;
            border: none;
        }
        /* 返回按钮 */
        #backBtn {
            margin-top: 15px;
            background-color: #ff5722;
            display: none; /* 初始隐藏 */
        }
    </style>
</head>
<body>
<h1>GET/POST 请求测试</h1>

<!-- 1. 初始按钮容器 -->
<div id="initialContainer">
    <button class="test-btn" onclick="sendGetRequest()">触发GET请求</button>
    <button class="test-btn post-btn" onclick="sendPostRequest()">触发POST请求</button>
</div>

<!-- 2. 结果显示容器（用于展示POST/GET结果） -->
<div id="resultContainer"></div>

<!-- 3. 隐藏的iframe：核心！接收POST表单提交，不触发onOverrideUrlLoading -->
<iframe id="hiddenPostIframe" name="hiddenPostTarget"></iframe>

<!-- 4. 返回按钮 -->
<button id="backBtn" class="test-btn" onclick="backToInitial()">返回上一页</button>

<script>
    // 生成请求结果的HTML（GET/POST通用）
    function generateResultHtml(method, param, isPost = false) {
        return `
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="utf-8">
                <title>${method} 请求结果</title>
                <style>
                    body {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        height: 100%;
                        margin: 0;
                        padding: 20px;
                        background-color: #f0f2f5;
                    }
                    .result-card {
                        background: white;
                        padding: 30px;
                        border-radius: 12px;
                        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
                        max-width: 500px;
                        width: 100%;
                    }
                    .method-tag {
                        display: inline-block;
                        padding: 5px 15px;
                        border-radius: 20px;
                        color: white;
                        font-weight: bold;
                        margin-bottom: 15px;
                    }
                    .get-tag { background: #2196F3; }
                    .post-tag { background: #4CAF50; }
                    .info-item {
                        font-size: 1.1rem;
                        color: #333;
                        margin: 8px 0;
                        text-align: left;
                    }
                </style>
            </head>
            <body>
                <div class="result-card">
                    <span class="method-tag ${method === 'GET' ? 'get-tag' : 'post-tag'}">${method} 请求</span>
                    <h2>请求成功</h2>
                    <div class="info-item">是否触发onOverrideUrlLoading：${isPost ? '否' : '是'}</div>
                </div>
            </body>
            </html>
        `;
    }

    // 切换到结果界面（隐藏按钮，显示结果）
    function showResultView(html) {
        const resultContainer = document.getElementById('resultContainer');
        // 写入HTML并强制重绘（解决空白问题）
        resultContainer.innerHTML = html;
        resultContainer.style.display = 'block';
        // 触发浏览器重绘（关键：避免HTML已写入但不显示）
        resultContainer.offsetHeight; // 读取offsetHeight强制布局更新

        document.getElementById('initialContainer').style.display = 'none';
        document.getElementById('backBtn').style.display = 'block';
    }

    // 返回初始界面
    function backToInitial() {
        document.getElementById('resultContainer').style.display = 'none';
        document.getElementById('backBtn').style.display = 'none';
        document.getElementById('initialContainer').style.display = 'flex';
        // 清空隐藏iframe内容（释放资源）
        document.getElementById('hiddenPostIframe').src = 'about:blank';
    }

    // GET请求（保持原逻辑，正常触发onOverrideUrlLoading）
    function sendGetRequest() {
        const param = 'test123';
        const dataUrl = `data:text/html;charset=utf-8,${encodeURIComponent(generateResultHtml('GET', param))}`;
        // 用iframe加载GET结果
        showResultView(`<iframe src="${dataUrl}" style="width:100%; height:100%; border:none;"></iframe>`);
    }

    // POST请求：核心修复！用隐藏表单+iframe提交，不触发回调
    function sendPostRequest() {
        const param = 'test456';
        const hiddenIframe = document.getElementById('hiddenPostIframe');
        const hiddenForm = document.createElement('form');

        // 1. 配置表单：POST方法，目标为隐藏iframe（关键：不触发顶级导航）
        hiddenForm.method = 'POST';
        hiddenForm.target = 'hiddenPostTarget'; // 与iframe的name一致
        // 2. 表单目标URL：用data URL（替代about:blank，解决兼容性）
        const postDataUrl = 'https://www.example.com/post'; // 空内容，仅用于接收提交
        hiddenForm.action = postDataUrl;

        // 3. 添加POST参数（可选，根据需求添加）
        const paramInput = document.createElement('input');
        paramInput.type = 'hidden';
        paramInput.name = 'param';
        paramInput.value = param;
        hiddenForm.appendChild(paramInput);

        // 4. 监听隐藏iframe加载完成（表示POST提交成功）
        hiddenIframe.onload = function() {
            console.log('POST请求提交成功（不触发回调）');
            // 提交成功后，显示结果界面
            showResultView(generateResultHtml('POST', param, true));
            // 移除监听（避免重复触发）
            hiddenIframe.onload = null;
        };

        // 5. 提交表单（触发POST请求，目标是隐藏iframe）
        document.body.appendChild(hiddenForm);
        hiddenForm.submit();
        // 6. 清理表单（提交后立即移除，不影响DOM）
        document.body.removeChild(hiddenForm);
    }
</script>
</body>
</html>